<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传、日志查看与项目发布</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <style>
        body {
            display: flex;
            height: 100vh;
            margin: 0;
            padding: 0;
        }

        .left-section {
            flex: 0 0 28%;
            background-color: #f8f9fa;
            padding: 10px;
            overflow-y: auto;
        }

        .right-section {
            flex: 0 0 72%;
            background-color: #ffffff;
            padding: 10px;
            overflow-y: auto;
        }

        .form-label {
            font-weight: 600;
        }

        .btn-primary {
            margin-top: 15px;
        }

        #log-output {
            height: calc(100vh - 60px);
            padding: 15px;
            background-color: #e9ecef;
            border-radius: 5px;
            overflow-y: auto;
            font-family: "Courier New", monospace;
            white-space: pre-wrap; /* Preserve line breaks and spaces */
            word-wrap: break-word; /* Wrap long words in logs */
            background-color: #282c34; /* Dark background for better visibility */
            color: #f8f9fa; /* Light text color */
            font-size: 14px;
        }
    </style>
</head>

<body>
<div class="left-section">
    <form id="uploadForm">
        <button type="button" class="btn btn-primary" onclick="uploadFile()">上传文件</button>
        <button type="button" class="btn btn-success mt-3" onclick="deployProject()">项目发布</button>
        <button type="button" class="btn btn-info mt-3" onclick="startViewLogs()">查看日志</button>
        <button type="button" class="btn btn-warning mt-3" onclick="stopViewLogs()" disabled id="stopLogButton">
            停止查看
        </button>
        <div class="mb-3">
            <label for="serverIp" class="form-label">项目 名称编号:</label>
            <input type="text" th:value="${projectServerVo.projectServerNo}" id="projectServerNo"  class="form-control"
                   required>
        </div>
        <div class="mb-3">
            <label for="serverIp" class="form-label">项目 名称:</label>
            <input type="text" th:value="${projectServerVo.projectName}" id="projectname"  class="form-control"
                   required>
        </div>
        <div class="mb-3">
            <label for="serverIp" class="form-label">服务器 名称:</label>
            <input type="text" id="hostname"  th:value="${projectServerVo.serverName}" class="form-control" required>
        </div>
        <div class="mb-3">
            <label for="serverIp" class="form-label">服务器 IP:</label>
            <input type="text" id="serverIp"  th:value="${projectServerVo.ip}" class="form-control" required>
        </div>
        <div class="mb-3">
            <label for="uploadPath" class="form-label">上传路径:</label>
            <input type="text" id="uploadPath"  th:value="${projectServerVo.uploadPath}" class="form-control" required>
        </div>
        <div class="mb-3">
            <label for="logPath" class="form-label">日志路径:</label>
            <input type="text" id="logPath"  th:value="${projectServerVo.logPath}" class="form-control" required>
        </div>
        <div class="mb-3">
            <label for="deployScript" class="form-label">发布脚本:</label>
            <input type="text" id="deployScript"  th:value="${projectServerVo.deployPath}" class="form-control" required>
        </div>
        <div class="mb-3">
            <label for="file" class="form-label">选择文件:</label>
            <input type="file" id="file" class="form-control" required>
        </div>

    </form>
</div>
<div class="right-section">
    <div id="log-output"></div>
</div>

<script src="/static/js/popper.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>

<script>
    let logInterval;


    function uploadFile() {
        const projectServerNo = document.getElementById('projectServerNo').value;
        const file = document.getElementById('file').files[0];

        const formData = new FormData();
        formData.append('projectServerNo', projectServerNo);
        formData.append('file', file);

        fetch('/upload', {
            method: 'POST',
            body: formData
        }).then(response => response.text())

                .then(data => {
                console.log(data)
                alert("上传完成，结果:" + data);
            })
            .catch(error => {
                alert("上传异常，结果:" + error);
            });
    }

    function deployProject() {
        const projectServerNo = document.getElementById('projectServerNo').value;

        const formData = new FormData();
        formData.append('projectServerNo', projectServerNo);

        fetch('/deploy', {
            method: 'POST',
            body: formData
        }).then(response => response.text())
            .then(data => {
                alert("发布完成，结果:" + data);
            })
            .catch(error => {
                alert("发布异常，结果:" + error);
            });
    }

    function startViewLogs() {
        const projectServerNo = document.getElementById('projectServerNo').value;

        document.getElementById('stopLogButton').disabled = false;

        logInterval = setInterval(() => {
            const formData = new FormData();
            formData.append('projectServerNo', projectServerNo);

            fetch('/viewLogs', {
                method: 'POST',
                body: formData
            })
                .then(response => response.text())
                .then(data => {
                    const logOutput = document.getElementById('log-output');
                    logOutput.innerHTML = data;
                    logOutput.scrollTop = logOutput.scrollHeight;
                })
                .catch(error => {
                    document.getElementById('log-output').innerHTML += '查看日志失败: ' + error + '<br>';
                });
        }, 2000);
    }

    function stopViewLogs() {
        clearInterval(logInterval);
        document.getElementById('stopLogButton').disabled = true;
    }
</script>
</body>

</html>
